vue
<template>
    <div id="app">
        <div class="relative page-container">
            <Header @navigateTo="scrollToSection" />
            <div ref="home">
                <Banner />
            </div>
            <div ref="energyExchange">
                <EnergyExchange />
            </div>
            <div ref="latestTransaction">
                <LatestTransaction />
            </div>
            <div ref="aboutUs">
                <AboutUs />
            </div>
            <div ref="faq">
                <FAQ />
            </div>
            <div ref="support">
                <Support />
            </div>
            <footer class="py-6 text-center">
                Copyright 2024. All rights reserved Savetrx
            </footer>
        </div>
    </div>
</template>

<script>
import Header from "./components/Header/index.vue";
import Banner from "./components/Banner/index.vue";
import EnergyExchange from "./components/EnergyExchange/index.vue";
import LatestTransaction from "./components/LatestTransaction/index.vue";
import AboutUs from "./components/AboutUs/index.vue";
import FAQ from "./components/FAQ/index.vue";
import Support from "./components/Support/index.vue";

export default {
    name: "App",
    components: {
        Header,
        Banner,
        EnergyExchange,
        LatestTransaction,
        AboutUs,
        FAQ,
        Support,
    },
    methods: {
        scrollToSection(section) {
            const element = this.$refs[section];
            if (element) {
                element.scrollIntoView({ behavior: "smooth" });
            }
        },
    },
};
</script>

<style src="./style.css"></style>